<template>
  <div class="page groupbuy-order-page">
    <van-nav-bar
      :title="shareUser+' 的拼团'"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      right-text="分享"
      @click-right="showShare"
    />

    <div class="container">
      <div class="cblock progbox">
        <div class="homebtn">
          <router-link to="/">
            <van-icon name="wap-home-o">商城</van-icon>
          </router-link>
        </div>
        <div class="countdown">
          <van-count-down :time="endtime" format="DD 天 HH 时 mm 分 ss 秒" />
        </div>
        <div v-for="item in goods" :key="item.id">
          <van-card
            :num="item.count"
            :price="item.price"
            :desc="item.vice_title"
            :title="item.title"
            :thumb="item.image"
          />
        </div>
        <van-progress class="fallin" :percentage="percent" stroke-width="16" />
        <template v-if="joined">
          <div v-if="percent >= 100" class="proginfo">拼团已成功, 请等待抽奖</div>
          <div v-else-if="percent>0" class="proginfo">还差 {{release}} 人,赶快邀请好友来拼单吧</div>
          <div v-else class="proginfo">还没人参与呢, 赶快分享给好友吧</div>
        </template>
        <div v-else class="proginfo">
          <van-button
            type="danger"
            size="small"
            style="width:60%"
            :to="'/group/confirm?goods_id='+goods[0].id+'&group_id='+order_id"
          >参加拼团</van-button>
        </div>
      </div>

      <div class="cblock userlist">
        <div v-if="!orders || orders.length<1" class="empty-box">没人参与呢, 快抢名额吧~</div>
        <van-list>
          <van-cell v-for="user in orders" :key="user.order_id">
            <van-image slot="icon" :src="user.avatar" round width="30" height="30"></van-image>
            <span slot="title">{{maskUser(user)}}</span>
            <span>{{formatDate(user.pay_time)}}</span>
          </van-cell>
        </van-list>
      </div>
       <group-rule></group-rule>
    </div>

    <van-overlay :show="showSharePopup" @click="showSharePopup = false">
      <div class="text-right">
        <van-image src="/static/share/guide.png"></van-image>
      </div>
    </van-overlay>
  </div>
</template>
<script >
import utils from "../../utils";

export default {
  data() {
    return {
      isLoading: true,
      order_id: 0,
      goods: [{}],
      order: {},
      orders: [],
      showSharePopup: false
    };
  },
  mounted() {
    let param = this.$route.params;
    if (param && param.id) {
      this.order_id = param.id;
    }
    this.loadData();
  },
  computed: {
    shareUser() {
      if (this.order.nickname) {
        return this.order.nickname;
      }
      if (this.order.recive_name) {
        return utils.maskString(this.order.recive_name);
      }
      if (this.order.username) {
        return utils.maskString(this.order.username);
      }
      return "...";
    },
    config() {
      return this.$store.state.config;
    },
    percent() {
      if (!this.order.count || !this.$store.state.config.groupbuy_num) {
        return 0;
      }
      return Math.floor(
        (this.order.count * 100) / this.$store.state.config.groupbuy_num
      );
    },
    release() {
      if (!this.$store.state.config.groupbuy_num) {
        return 22 - this.order.count;
      }
      return this.$store.state.config.groupbuy_num - this.order.count;
    },
    endtime() {
      let days = this.$store.state.config.groupbuy_cycle;
      if (!days) days = 1;
      days = days * 24 * 60 * 60 * 1000;
      let start = new Date().getTime();
      if (this.order.create_time) start = this.order.create_time * 1000;
      return days - (new Date().getTime() - start);
    },
    member() {
      return this.$store.state.userinfo;
    },
    joined() {
      if (!this.$store.state.isLogin) {
        return false;
      }
      if (this.member.id == this.order.member_id) {
        return true;
      }
      if (this.orders && this.orders.length > 0) {
        for (let i = 0; i < this.orders.length; i++) {
          if (this.orders[i].member_id == this.member.id) {
            return true;
          }
        }
      }
      return false;
    }
  },
  methods: {
    loadData() {
      this.$api
        .post("groupbuy/order", { id: this.order_id })
        .then(json => {
          if (json.code == 1) {
            this.goods = utils.fixListImage(json.data.goods);
            this.order = utils.fixListImage(json.data.order, "avatar");
            this.orders = utils.fixListImage(json.data.orders, "avatar");

            this.$api.wxShare({
              title: this.goods[0].title,
              desc:this.shareUser + " 的拼团",
              imgUrl: this.goods[0].image
            });
          }
        })
        .catch(err => {
          this.$toast.fail(err.msg || "参数错误");
          this.$router.back();
        });
    },
    maskUser(user) {
      if (user.nickname) {
        return user.nickname;
      }
      if (user.recive_name) {
        return utils.maskString(user.recive_name);
      }
      if (user.username) {
        return utils.maskString(user.username);
      }
      return "...";
    },
    formatDate(timestamp) {
      return utils.dateFormat("Y-m-d H:i", timestamp);
    },
    onClickLeft() {
      this.$router.back();
    },
    showShare() {
      this.showSharePopup = true;
    }
  }
};
</script>
<style lang="scss">
.groupbuy-order-page {
  .cblock {
    background: #fff;
    border-radius: 5px;
    padding: 20px;
    margin-top: 20px;
  }
  .progbox {
    position: relative;
    .homebtn {
      float: right;
    }
  }

  .countdown {
    text-align: center;
    padding-bottom: 10px;
    .van-count-down {
      display: inline-block;
      background: #1989fa;
      border-radius: 3px;
      padding: 0 5px;
      color: #fff;
    }
  }
  .van-progress {
    margin-top: 20px;
  }
  .proginfo {
    font-size: 15px;
    text-align: center;
    margin-top: 10px;
  }
  .userlist {
    .van-list {
      max-height: 250px;
      overflow: auto;
    }
  }
}
</style>